<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #card{
            width: 500px;
            height: 350px;
        }
        .title{
            height:50px;
        }
        .title span{
            width: 100px;
            height: 50px;
            background-color:#ccc;
            display: inline-block;
            line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */
            text-align:center;
        }
        .content .list{
            width: 500px;
            height: 300px;
            background-color: yellow;
            display: none;
        }
        .content .active{
            display: block;
        }

        .title .current{
            background-color: yellow;
        }
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="book in book_list">{{book.title}}</li>
        </ul>

        <table border="1" align="center" width="799">
            <tr>
                <th>序号</th>
                <th>ID</th>
                <th>图书名</th>
                <th>价格</th>
            </tr>
            <tr v-for="book,index in book_list">
                <td>下标：{{index+1}}</td>
                <td>{{book.id}}</td>
                <td>{{book.title}}</td>
                <td>{{book.price}}</td>
            </tr>
        </table>

    </div>

    <script>
        var vm1 = new Vue({
            el:"#app",
            data:{
                book_list:[
                    {"id":11,"title":"图书名称1","price":20},
                    {"id":12,"title":"图书名称2","price":2000.3},
                    {"id":13,"title":"图书名称3","price":200.50},
                    {"id":14,"title":"图书名称4","price":200},
                ]
            }
        })
    </script>



        <ul id="test">
            <!--i是每一个value值,j是每一个键名-->
            <li v-for="value, attr in book">{{attr}}:{{value}}</li>
        </ul>
        <script>
            var vm3 = new Vue({
                el:"#test",
                data:{
                    book: {
                        // "attr属性名":"value属性值"
                        "id":11,
                        "title":"图书名称1",
                        "price":200
                    },
                },
            })
        </script>


</body>
</html>
